<template>
  <view class="forget">
    <view class="header">
      <view class="back" @click="loginClick"></view>
      忘记密码
    </view>
    <image
      class="avtar"
      src="../../../static/PersonalCenter/avtarf.png"
      mode=""
    />
    <view class="wrap">
      <view class="row">
        <image
          class="img"
          src="../../../static/PersonalCenter/icon1.png"
          mode=""
        />
        <input
          type="number"
          maxlength="11"
          v-model="mobile"
          placeholder="请输入您的手机号码"
        />
      </view>
      <view class="row">
        <image
          class="img"
          src="../../../static/PersonalCenter/icon2.png"
          mode=""
        />
        <input type="number" v-model="captcha" placeholder="请输入验证码" />
        <view class="authBtn">
          <text v-if="verifyshow" @click="authClcik">获取验证码</text>
          <text v-else>{{ second }}s</text>
        </view>
      </view>
      <view class="row">
        <image
          class="img"
          src="../../../static/PersonalCenter/icon3.png"
          mode=""
        />
        <input type="password"  v-model="password" placeholder="请输入密码" />
      </view>
      <view class="row">
        <image
          class="img"
          src="../../../static/PersonalCenter/icon3.png"
          mode=""
        />
        <input type="password" v-model="pwd" placeholder="请确认密码" />
      </view>
    </view>
    <view class="btn" @click="regiSter">确定</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      mobile: "",
      password: "",
      pwd: "",
      captcha: "", //验证码
      verifyshow: true,
      second: "",
      timer: null,
    };
  },
  methods: {
    //退出
    loginClick() {
      uni.navigateTo({
        url: "../Login/Login",
      });
    },

    async regiSter() {
      let mobile = this.mobile;
      let password = this.password;
      let captcha = this.captcha;
      let that = this;
      if (this.mobile == "") {
        uni.showToast({
          title: "手机号码不能为空",
          icon: "none",
        });
        return;
      }
      if (this.captcha == "") {
        uni.showToast({
          title: "验证码不能为空",
          icon: "none",
        });
        return;
      }
      if (this.password == "") {
        uni.showToast({
          title: "密码不能为空",
          icon: "none",
        });
        return;
      }
      if (this.password != this.pwd) {
        uni.showToast({
          title: "密码不一致",
          icon: "none",
        });
        this.password = this.pwd = "";
        return false;
      }
      if (this.mobile && this.password) {
        const res = await that.$myRequest({
          url: "user/setPwd",
          method: "POST",
          data: {
            mobile: mobile,
            password: password,
            captcha: captcha,
          },
        });
        if (res.data.code == 1) {
          uni.navigateTo({
            url: "../pasLogin/Login",
          });
        } else {
          uni.showToast({
            title: res.data.msg,
            icon: "loading",
          });
        }
      }
    },

    //获取验证码
    async authClcik() {
      let mobile = this.mobile;
      let that = this;
      //	let code = this.code
      if (!RegExp(/^1[34578]\d{9}$/).test(that.mobile)) {
        uni.showToast({
          title: "请输入正确的手机号码",
          icon: "none",
        });
      } else {
        uni.showLoading({
          title: "正在发送",
        });
        that.second = 60;
        const data = await that.$myRequest({
          url: "sms/get_captcha",
          method: "POST",
          data: {
            mobile: mobile,
            event: "changePwd",
          },
        });
        if (data.data.code == 1) {
          uni.hideLoading();
          that.timedown(that.second);
        } else {
          uni.hideLoading();
          uni.showToast({
            title: data.data.msg,
            icon: "loading",
          });
        }
      }
    },
    // 验证码倒计时
    timedown(num) {
      let that = this;
      if (num == 0) {
        that.verifyshow = true;
      } else {
        that.verifyshow = false;
        setTimeout(() => {
          that.second--;
          that.timedown(that.second);
        }, 1000);
      }
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #fff;
  width: 750rpx;
}
.forget {
  .header {
    width: 100%;
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 36rpx;
    font-weight: 500;
    color: #333333;
    .back {
      position: absolute;
      left: 30rpx;
      width: 30rpx;
      height: 30rpx;
      background: url("../../../static/clos.png") no-repeat;
      background-size: 100% 100%;
    }
  }
  .avtar {
    display: block;
    width: 156rpx;
    height: 156rpx;
    margin: 96rpx auto 0;
  }
  .wrap {
    width: 100%;
    box-sizing: border-box;
    padding: 0 60rpx;
    margin-top: 110rpx;
    .row {
      display: flex;
      align-items: center;
      box-sizing: border-box;
      border-bottom: 1rpx solid #eee;
      padding-bottom: 25rpx;
      position: relative;
      margin-bottom: 62rpx;
      .img {
        display: block;
        width: 24rpx;
        height: 26rpx;
        margin-right: 18rpx;
      }
      input {
        flex: 1;
        display: block;
        border: none;
        background: none;
        outline: none;
        font-size: 28rpx;
        font-weight: 400;
        color: #333;
      }
      .authBtn {
        position: absolute;
        right: 0;
        font-size: 26rpx;
        font-weight: 400;
        color: #c52b2e;
      }
    }
  }
  .btn {
    width: 530rpx;
    height: 76rpx;
    background: #c52b2e;
    border-radius: 38rpx;
    text-align: center;
    line-height: 76rpx;
    font-size: 30rpx;
    font-weight: 500;
    color: #ffffff;
    margin: 130rpx auto 0;
  }
}
</style>
